<template>
  <div class="box">
    <el-tabs type="card" @tab-click="handleClick">

      <!-- 接受组件切换显示的返回按钮 -->
      <el-button v-if="id" class="btn-group" size="mini" @click="goBack">返回</el-button>
      <el-tab-pane label="申请详情">
        <div v-if="!id">
          <!-- 设计变更1 -->
          <!-- 发起变更2触发BPM -->
          <!-- 路由切换按钮显示 -->
          <!-- <c-permission code="all">
            <c-button opt-code="designChange" :disabled="designNotAllow" size="mini" type="primary" @click="designChange()">设计变更</c-button>
            <c-button opt-code="submitChange" :disabled="changeNotAllow" size="mini" type="primary" @click="designChange()">发起变更</c-button>
            <c-button opt-code="pause" size="mini" :disabled="stateNotAllow" type="primary" @click="pause">暂停</c-button>
            <c-button opt-code="renew" size="mini" :disabled="regainNotAllow" type="primary" @click="regain">恢复</c-button>
          </c-permission> -->
        </div>
        <div v-loading="dataLoading">
          <c-section title="设计申请基础信息">
            <c-list :column="3">
              <c-list-item label="设计进度" dict-type-code="SHOP_DESIGN_STATE" :value="detailData.state" />
              <c-list-item label="预计提报设计申请时间" :value="detailData.expectReportApplyTime" />
              <c-list-item label="设计申请提报时间" :value="detailData.reportApplyTime" />
              <c-list-item label="设计申请是否延期" dict-type-code="BOOLEANS" :value="detailData.isApplyDelay&&String(detailData.isApplyDelay)" />
              <c-list-item label="设计申请人" :value="detailData.applicantName" />
              <c-list-item label="申请人联系方式" :value="detailData.applyUserPhone" />
              <c-list-item label="设计申请BPM单号" :value="detailData.applyBpmCode" />
              <c-list-item label="数据来源" dict-type-code="DATA_FROM" :value="detailData.dataSource" />
              <c-list-item label="BPM审核通过时间" :value="detailData.bpmReviewPassTime" />
              <c-list-item label="归档时间" :value="detailData.archiveTime||'暂无'" />
              <c-list-item label="首次设计申请时间" :value="detailData.firstApplyDate||'暂无'" />
              <c-list-item label="最新设计申请时间" :value="detailData.newApplyDate||'暂无'" />
              <c-list-item label="设计申请审核通过时间" :value="detailData.passingDate||'暂无'" />
            </c-list>
          </c-section>
          <c-section title="门店建设基础信息">
            <c-list :column="3">
              <c-list-item label="门店编码" :value="detailData.shopCode" />
              <c-list-item label="门店" :value="detailData.shopName" />
              <c-list-item label="客户编码" :value="detailData.clientCode" />
              <c-list-item label="所属客户" :value="detailData.clientName" />
              <c-list-item label="所属办事处" :value="detailData.officeName" />
              <c-list-item label="办事处性质" :value="detailData.officeNature" />
              <c-list-item label="经销商姓名" :value="detailData.customerName " />
              <c-list-item label="经销商电话" :value="detailData.customerPhone" />
              <c-list-item label="门店经营面积" :value="detailData.shopArea" suffix="㎡" />
              <c-list-item label="门店类型" dict-type-code="SHOP_TYPE" :value="detailData.shopType" />
              <c-list-item label="门店业务类型" dict-type-code="BIZ_TYPE" :value="detailData.shopBizType" />
              <c-list-item label="门店城市级别" dict-type-code="CITY_LEVEL" :value="detailData.shopCityLevel" />
              <c-list-item label="门店市场层级" dict-type-code="MARKET_LEVEL" :value="detailData.shopMarketLevel" />
              <c-list-item label="门店营业状态" dict-type-code="SHOP_BIZ_STATE" :value="detailData.businessStatus" />
              <c-list-item label="门店详细地址" :span="3" :value="detailData.shopAddress" />
              <c-list-item label="门店建设范围" dict-type-code="DECORATION_RANGE" :value="detailData.decorationRange" />
              <c-list-item label="门店建设编号" :value="detailData.constCode" />
              <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detailData.decorationForm" />
              <c-list-item label="报图类型" dict-type-code="MARKET_TYPE" :value="detailData.marketType" />
              <c-list-item label="门店建设类型" dict-type-code="CONST_TYPE" :value="detailData.constType" />
              <c-list-item label="商家类别" dict-type-code="BIZMAN_TYPE" :value="detailData.bizmanType" />

              <c-list-item label="测量卖场面积" suffix="㎡" :value="detailData.surveyShopArea" />
              <c-list-item label="扩建面积" suffix="㎡" :value="detailData.surveyExpansionArea" />
              <c-list-item label="翻新面积" suffix="㎡" :value="detailData.surveyRefurbishArea" />
              <c-list-item label="是否战略市场" dict-type-code="BOOLEANS" :value="detailData.isStrategyMarket&&String(detailData.isStrategyMarket)" />

              <c-list-item label="是否KA卖场" :value="detailData.isKaMarket===1?'是':'否'" />
              <c-list-item label="预计开业时间" :value="detailData.expectOpenTime" />
              <c-list-item label="预计进场装修时间" :value="detailData.expectRenovationTime" />
              <c-list-item type="textarea" label="设计申请说明" :span="3" :value="detailData.applyDesc" />

              <c-list-item type="textarea" label="图纸跟踪专员审核意见" :span="3" :value="detailData.picTrackReviewAdvice" />

              <c-list-item type="textarea" label="领导审核意见汇总" :span="3" :value="detailData.leadReviewAdviceSum" />

              <c-list-item type="textarea" label="终止原因" :span="3" :value="detailData.endReason" />

            </c-list>
          </c-section>
          <c-section v-if="detailData.decorationRange&&detailData.decorationRange.includes('DOOR')" title="门头设计申请信息">
            <c-list :column="3">
              <c-list-item label="门头报图面积" :value="(detailData.doorHeadPicArea||0)+'㎡'" />
              <c-list-item label="门头模式" dict-type-code="DOOR_HEAD_MODE" :value="detailData.doorHeadMode" />
              <c-list-item label="入口门类型" dict-type-code="ENTRANCE_TYPE" :value="detailData.entranceType" />
              <c-list-item label="门头设计内容" :span="3" dict-type-code="DOOR_HEAD_DESIGN" :value="detailData.doorHeadDesign" />
              <c-list-item label="是否需要门头效果图" :value="detailData.isNeedRendering===1?'是':'否'" />
            </c-list>
          </c-section>
          <c-section v-if="detailData.decorationRange&&detailData.decorationRange.includes('STORES')" title="卖场设计申请信息">
            <c-list :column="2">
              <c-list-item label="所在楼层" :value="detailData.floors" />
              <c-list-item label="可吊顶最低高度" :value="detailData.ceilingMinHeight" suffix="m" />
            </c-list>
            <div class="bread-box"><span>各区域建议报图面积</span></div>
            <c-list :column="3">
              <c-list-item label="新业务建议面积" :value="(detailData.newBusinessSuggestArea||0)" suffix="㎡" />
              <c-list-item label="软体建议面积" :value="(detailData.softwareSuggestArea||0)" suffix="㎡" />
              <c-list-item label="成品套房建议面积" :value="(detailData.finishedProductSuggestArea||0)" suffix="㎡" />
              <c-list-item label="公共区建议面积" :value="(detailData.publicSuggestArea||0)" suffix="㎡" />
              <c-list-item label="微型睡眠区建议面积" :value="(detailData.miniSleepArea||0)" suffix="㎡" />

            </c-list>
            <div class="bread-box"><span>区域报图信息</span></div>
            <c-list :column="3">
              <c-list-item label="所选设计方案" :value="detailData.selectedDesign" />
              <c-list-item label="设计申请业务类型" dict-type-code="BIZ_TYPE" :value="detailData.applyBizType" />
              <c-list-item :span="3" label="所选设计区域" :value="formaterData(areaList,detailData.applySpecialZone)" />
              <c-list-item :span="3">
                <div style="margin-left:100px;color:#999">
                  <i class="tips-icon el-icon-warning" />
                  1、多功能墙面家居：新店必上，翻新店面根据空间可利用性设计<br>
                  2、情景间：情景间为配合软体销售设计，必须设计软体才能同步设计情景间<br>
                  3、窗帘：新店必上，翻新店面根据空间可利用性设计<br>
                  4、整体橱柜：橱柜只能上样专区，专区至少5套橱柜<br>
                  5、木门：所有店面必上，800㎡以上店面上专区，800㎡以下店面可融入上样，不低于8扇
                </div>
              </c-list-item>
              <c-list-item label="全屋定制面积" :value="(detailData.wholeHouseCustomizedArea||0)+'㎡'" />
              <c-list-item label="软体面积" :value="(detailData.softwareArea||0)+'㎡'" />
              <c-list-item label="套房面积" :value="(detailData.suiteArea||0)+'㎡'" />
              <c-list-item label="整体橱柜面积" :value="(detailData.wholeCabinetArea||0)+'㎡'" />
              <c-list-item label="卫浴面积" :value="(detailData.bathroomArea||0)+'㎡'" />
              <c-list-item label="样板间面积" :value="(detailData.sampleRoomArea||0)+'㎡'" />
              <c-list-item label="情景间面积" :value="(detailData.sceneArea||0)+'㎡'" />
              <c-list-item label="公共区面积" :value="(detailData.publicSpaceArea||0)+'㎡'" />
              <c-list-item label="装修主材区面积" :value="(detailData.furnishArea||0)+'㎡'" />
              <!-- <c-list-item label="是否含换代特价区" :value="detailData.isSpecialDistrict===1?'是':'否'" /> -->
              <!-- <c-list-item label="换代特价区面积" :value="(detailData.specialDistrictArea||0)+'㎡'" /> -->

              <c-list-item label="卖场报图总面积" :value="(detailData.shopTotalArea||0)+'㎡'" />
              <c-list-item label="新业务面积汇总" :value="(detailData.newBusinessAreaSummary||0)+'㎡'" />
              <c-list-item label="软体区面积汇总" :value="(detailData.softwareSumArea||0)+'㎡'" />
              <c-list-item label="套房区面积汇总" :value="(detailData.suiteArea||0)+'㎡'" />
              <c-list-item label="公共区面积汇总" :value="(detailData.publicSumArea||0)+'㎡'" />

            </c-list>

          </c-section>
          <div>
            <div class="bread-box"><span>公共空间设计内容</span></div>
            <c-list :column="3">
              <c-list-item :span="3" label="公共空间设计内容" dict-type-code="PUBLIC_SPACE_CONTENT" :value="detailData.publicSpaceContent" />
              <c-list-item v-show="detailData.guideSysProgram" label="导视系统设计方案" dict-type-code="GUIDE_SYS_PROGRAM" :value="detailData.guideSysProgram" />
              <c-list-item v-show="detailData.stairsProgram" label="楼梯设计方案" dict-type-code="STAIRS_PROGRAM" :value="detailData.stairsProgram" />
              <c-list-item v-show="detailData.toiletProgram" label="卫生间设计方案" dict-type-code="TOILET_PROGRAM" :value="detailData.toiletProgram" />
              <c-list-item v-show="detailData.designerStationNum" suffix="个" label="设计师工位数量" :value="detailData.designerStationNum" />
              <c-list-item v-show="detailData.officeNum" suffix="个" label="办公室设计数量" :value="detailData.officeNum" />
              <c-list-item v-show="detailData.otherContent" label="其他" :value="detailData.otherContent" />
            </c-list>
          </div>
          <div>
            <div class="bread-box"><span>装修主材区设计内容</span></div><c-list :column="1">
              <c-list-item label="装修主材区设计内容" dict-type-code="MATERIAL_AREA" :value="detailData.furnishAreaContent" />
            </c-list>
            <c-section title="图纸设计信息">
              <c-list :column="3">
                <c-list-item label="图纸紧急程度" dict-type-code="PIC_URGENT_LEVEL" :value="detailData.picUrgentLevel" />
                <c-list-item label="是否重点市场" dict-type-code="BOOLEANS" :value="detailData.isFocusMarket" />
                <c-list-item label="首次任务分配时间" :value="detailData.distributeTime" />
                <c-list-item label="设计单位" :value="detailData.designUnitName" />
                <c-list-item label="店面等级" dict-type-code="SHOP_LEVEL_CODE" :value="detailData.shopLevelCode" />
                <c-list-item label="设计完成时间" :value="detailData.completeTime" />
              </c-list>
            </c-section>
            <c-section title="经销商确认结果">
              <c-list :column="3">
                <c-list-item label="确认结果" dict-type-code="REVIEW_RESULT" :value="detailData.confirmResult" />
                <c-list-item label="确认人" :value="detailData.confirmBy" />
                <c-list-item label="确认时间" :value="detailData.confirmTime" />
                <c-list-item type="textarea" label="确认意见" :span="3" :value="detailData.confirmAdvice" />

                <!-- <c-list-item :span="3" label="确认意见" :value="detailData.confirmAdvice" /> -->
              </c-list>
            </c-section>
          </div>
        </div></el-tab-pane>
      <el-tab-pane label="附件信息">
        <table-box
          ref="refDesignFile"
          :table-config="fileDataConfig"
          :table-height="400"
          :data="fileData"
          show-index
        />
      </el-tab-pane>
      <el-tab-pane label="设计图纸">
        <table-box
          ref="refDesignPic"
          :table-config="tableConfig1"
          :table-height="400"
          show-index
          no-request
          :other-filters="designPicFilters"
        />
      </el-tab-pane>
      <el-tab-pane label="报图明细">
        <table-box
          ref="refDrawingDetail"
          :table-config="tableConfig2"
          :table-height="400"
          :table-span-method="objectSpanMethod"
          show-index
          :data="picDetailList"
          :other-filters="otherFilters"
        />
      </el-tab-pane>
      <!-- :table-span-method="objectSpanMethod"
          @data-change="outPicDetail" -->
      <el-tab-pane label="出图明细">
        <table-box
          ref="refPicDetail"
          :table-config="tableConfig3"
          :table-height="400"
          :other-filters="otherFilters"
          show-index
          no-request
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 图片预览 -->
    <el-image-viewer
      v-if="imgDialogVisible"
      :on-close="handleCloseImg"
      :url-list="[previewImg]"
    />
    <stop-design v-if="pauseVisible" ref="refDlg" :visible.sync="pauseVisible" :current="detailData" @on-success="getInfo" />
    <!-- <change
      v-if="showChange"
      :page-show.sync="showChange"
      @success="refreshTable"
    /> -->
  </div>
</template>

<script>
import { getSeriesDetailById, getMapareaByShop } from '@/api/shopDesign'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
// import BackPageMixin from '@/mixins/backPage'
import { getExceptionType, saveException, getAreaList } from '@/api/common'
import stopDesign from './components/stopDlg.vue'
import { filterURL } from '@/utils'
import { getWoleInfo } from '@/api/user'
import CSection from '../../components/CSection/CSection.vue'
import { getShopAttachment } from '@/api/common.js'
import { getDictByPatchType } from '@/api/dataDict'
import { otherFiltersItem } from '@/utils'

export default {
  name: 'DesignDetail',
  components: { CSection, stopDesign, ElImageViewer },
  // mixins: [BackPageMixin],
  props: {
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      queryId: '',
      previewImg: '',
      pauseVisible: false,
      imgDialogVisible: false,
      stateNotAllow: false,
      changeNotAllow: false, // 是否禁用发起变更
      designNotAllow: false, // 是否禁用设计变更
      tabledata: [],
      areaList: [],
      picDetailList: [], // 报图明细
      furnishOptions: [],
      applySampleSpaceOptions: [],
      detailData: { },
      fileData: [], // 附件
      designRangeOptions: [], // 设计范围
      decorationTypeOptions: [],
      designBizTypeOptions: [],
      dataLoading: false,
      otherFilters: [],
      designPicFilters: [],
      tableSelected: [], // 选中行
      regainNotAllow: false,

      fileDataConfig: {
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'attachmentType',
            label: '附件类型',
            minWidth: '140'
          },
          {
            prop: 'attachmentName',
            label: '附件名称',
            minWidth: '140'
          },
          {
            prop: 'createBy',
            label: '创建人',
            minWidth: '140'
          },
          {
            prop: 'createTime',
            label: '上传时间',
            minWidth: '140'
          },
          {
            label: '操作',
            button: [
              {
                name: '预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '下载',
                clickFun: this.handleDownload,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }]
      },
      tableConfig1: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/shopDesignPicture/getPicture/page1`,
        buttonGroupCode: 'default',
        hideFuncBar: true,
        apiHeader: {
          'Permission-App': 'slm'
        },
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: '140',
            className: 'btn-green',
            isButton: true,
            clickFun: this.handleDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            minWidth: '120',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            }

          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: '120',
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.designRangeOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: '120',
            render: (creat, row) => {
              if (!row.decorationType || !this.decorationTypeOptions) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: '120',
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.areaCode)
                if (flag) {
                  arr.push(item.areaName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: '140',
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积(㎡)',
            minWidth: '140'
          },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            minWidth: '130',
            render: function(createElement, rows) {
              if (rows.haveEAndC === 1 || rows.haveEAndC === 0) {
                return (<div>  {rows.haveEAndC === 1 ? '是' : '否' }</div>)
              }
              return ''
            }
          },
          {
            prop: 'eandCArea',
            label: '成融定面积(㎡)',
            minWidth: '140'
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总(㎡)',
            minWidth: '180'
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: '160'
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: '120'
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: '120'
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            minWidth: '120',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            }
          },
          {
            prop: 'state',
            label: '图纸状态',
            minWidth: '120',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            }
          },
          {
            prop: 'drawingIssuanceTime',
            label: '图纸下发时间',
            minWidth: '150'
          },
          {
            prop: 'constCode',
            label: '门店建设项目号',
            minWidth: '120'
          },
          {
            prop: 'shopName',
            label: '所属门店',
            minWidth: '120'
          },
          {
            prop: 'clientCode',
            label: '客户编码',
            minWidth: '120'
          },
          {
            prop: 'clientName',
            label: '所属客户',
            minWidth: '120'
          },
          {
            prop: 'officeName',
            label: '所属办事处',
            minWidth: '120'
          }
        ]
      },
      tableConfig2: {
        buttonGroupCode: 'default',
        hideFuncBar: true,
        tabIndex: 0,
        // 表格字段动态配置
        setting: [
          {
            prop: 'areaName',
            label: '所属区域',
            fixed: true,
            minWidth: '110'
          },
          {
            prop: 'spaceName',
            label: '所属空间',
            minWidth: '120'
          },
          {
            prop: 'spaceReportArea',
            label: '空间报图面积',
            minWidth: '120'
          },
          {
            prop: 'styleName',
            label: '所属专区',
            minWidth: '120'
          },
          {
            prop: 'styleReportArea',
            label: '专区报图面积',
            minWidth: '120'
          },
          {
            prop: 'seriesName',
            label: '系列名称',
            minWidth: '120'
          },
          {
            prop: 'cabinetColorName',
            label: '柜体颜色',
            minWidth: '120'
          }, {
            prop: 'doorColorName',
            label: '门板颜色',
            minWidth: '120'
          },
          {
            prop: 'seriesReportArea',
            label: '明细报图面积',
            minWidth: '120'
          },
          {
            prop: 'chooseCustomizedSeriesName',
            label: '配套定制系列',
            minWidth: '130'
          },
          {
            prop: 'chooseCupboardSeriesName',
            label: '配套橱柜系列',
            minWidth: '130'
          },
          {
            prop: 'actureApplySampleSpace',
            label: '实际上样空间',
            minWidth: '130',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'SAMPLE_FUNCTION_SPACE'
            },
            render: (creat, row) => {
              if (!row.actureApplySampleSpace || !this.applySampleSpaceOptions) {
                return
              }
              let list = []
              if (typeof (row.actureApplySampleSpace) === 'string') {
                list = row.actureApplySampleSpace.split(',')
              } else {
                list = row.actureApplySampleSpace
              }
              const arr = []
              this.applySampleSpaceOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          }]
      },
      tableConfig3: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/designOutpicDetailTask/getDateByContsCode`,
        buttonGroupCode: 'default',
        tabIndex: 1,
        onlySearchBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'picTaskName',
            label: '图纸任务名称',
            minWidth: '120'
          },
          {
            prop: 'areaName',
            label: '所属区域',
            minWidth: '120'
          },
          {
            prop: 'spaceName',
            label: '所属空间',
            minWidth: '120'
          },
          {
            prop: 'isProgramOutpic',
            label: '空间是否出图',
            minWidth: '120',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            render: function(createElement, rows) {
              if (rows.isProgramOutpic === 1 || rows.isProgramOutpic === 0) {
                return (<div>  {rows.isProgramOutpic === 1 ? '是' : '否' }</div>)
              }
              return ''
            }
          },
          {
            prop: 'actualOutpicArea',
            label: '区域出图面积',
            minWidth: '120'
          },
          {
            prop: 'outpicDesc',
            label: '出图说明',
            minWidth: '120'
          },
          {
            prop: 'styleName',
            label: '所属专区',
            minWidth: '120'
          },
          {
            prop: 'styleActualOutpicArea',
            label: '风格出图面积(㎡)',
            minWidth: '120'
          },
          {
            prop: 'assortCustomizedArea',
            label: '配套定制面积(㎡)',
            minWidth: '140'
          },
          {
            prop: 'styleOutDesc',
            label: '专区出图说明',
            minWidth: '120'
          },
          {
            prop: 'seriesName',
            label: '产品系列',
            minWidth: '120'
          },

          {
            prop: 'chooseCustomizedSeriesName',
            label: '配套定制系列',
            minWidth: '130'
          },
          {
            prop: 'chooseCupboardSeriesName',
            label: '配套橱柜系列',
            minWidth: '120'
          },
          {
            prop: 'actualApplySampleSpace',
            label: '实际申请上样空间',
            minWidth: '120',
            render: (creat, row) => {
              if (!row.actualApplySampleSpace || !this.applySampleSpaceOptions) {
                return
              }
              let list = []
              if (typeof (row.actualApplySampleSpace) === 'string') {
                list = row.actualApplySampleSpace.split(',')
              } else {
                list = row.actualApplySampleSpace
              }
              const arr = []
              this.applySampleSpaceOptions.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() || row.actualApplySampleSpace }</span>)
            }
          },
          {
            prop: 'isMustUp',
            label: '是否必上',
            minWidth: '120',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            render: function(createElement, rows) {
              if (rows.isMustUp === 1 || rows.isMustUp === 0) {
                return (<div>  {rows.isMustUp === 1 ? '是' : '否' }</div>)
              }
              return ''
            }
          },
          {
            prop: 'designApplyArea',
            label: '报图面积(㎡)',
            minWidth: '130'
          },
          {
            prop: 'isDetailOutpic',
            label: '系列是否出图',
            minWidth: '120',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            render: function(createElement, rows) {
              if (rows.isDetailOutpic === 1 || rows.isDetailOutpic === 0) {
                return (<div>  {rows.isDetailOutpic === 1 ? '是' : '否' }</div>)
              }
              return ''
            }
          },
          {
            prop: 'seriesOutpicArea',
            label: '系列出图面积(㎡)',
            minWidth: '140'
          },

          {
            prop: 'picTaskCode',
            label: '图纸任务号',
            minWidth: '130'
          }
        ]
      },
      picTaskCode: []
    }
  },
  created() {
    if (this.id) this.queryId = this.id
    else this.queryId = this.$route.query.id
    this.getInfo()
    // this.getFiles()
    this.getDict()
    this.getAreaSelect()
  },
  methods: {
    goBack() {
      this.$emit('goBack', false)
    },
    getAreaSync(data) {
      if (!data) return
      // 根据门店获取测绘数据的 测量卖场面积，翻新面积，扩建面积
      //  surveyRefurbishArea // 翻新面积--门店档案面积
      // surveyExpansionArea // 扩建面积--门店档案面积
      // surveyShopArea // 测量卖场面积--门店档案面积
      getMapareaByShop(data).then(res => {
        if (res.success === 1) {
          const temp = res.data.records.filter(el => el.isValid)
          if (temp.length > 0) {
            this.$set(this.detailData, 'surveyRefurbishArea', temp[0].surveyRefurbishArea || 0)
            this.$set(this.detailData, 'surveyExpansionArea', temp[0].surveyExpansionArea || 0)
            this.$set(this.detailData, 'surveyShopArea', temp[0].surveyShopArea || 0)
            this.$set(this.detailData, 'isStrategyMarket', temp[0].isStrategyMarket || 0)
          } else {
            this.$set(this.detailData, 'surveyRefurbishArea', 0)
            this.$set(this.detailData, 'surveyExpansionArea', 0)
            this.$set(this.detailData, 'surveyShopArea', 0)
            this.$set(this.detailData, 'isStrategyMarket', '')
          }
        }
      })
    },
    // 合并表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1) {
        return {
          rowspan: row.areaSpanRow,
          colspan: row.areaSpanColumn
        }
      } else if (columnIndex >= 2 && columnIndex <= 3) {
        return {
          rowspan: row.programSpanRow,
          colspan: row.programSpanColumn
        }
      } else if (columnIndex >= 4 && columnIndex <= 5) {
        return {
          rowspan: row.styleSpanRow,
          colspan: row.styleSpanColumn
        }
      }
      return {
        rowspan: 1,
        colspan: 1
      }
    },
    // 跳转图纸详情
    handleDetail(data) {
      this.$router.push({ name: 'ShopDrawingDetail', query: { id: data.id, picTaskCode: data.picTaskCode, designRange: data.designRange }})
    },
    outPicDetail(data) {
      this.handlerPicData(data)
    },
    // 数据字典格式化数据
    formaterData(arr, value) {
      if (!value || !arr) {
        return value || ''
      }
      let list = []
      if (typeof (value) === 'string') {
        list = value.split(',')
      } else {
        list = value
      }
      const temp = []
      arr.forEach((item) => {
        const flag = list.some(v => v === item.areaCode)
        if (flag) {
          temp.push(item.areaName)
        }
      })
      return temp.toString() || value
    },
    getAreaSelect() {
      getAreaList().then(res => {
        if (res.success === 1) this.areaList = res.data.records
      })
    },
    // 设计变更
    designChange() {
      this.$router.push({ name: 'FromDesignChange', query: { id: this.queryId }})
    },
    // 恢复
    async  regain() {
      const submitForm = {
        exceptionHandleId: '',
        bizCode: this.detailData.constCode || '',
        bizName: '',
        exceptionDesc: '',
        constCode: this.detailData.constCode || '',
        modelId: this.detailData.id || '',
        belongModel: 'SHOP_DESIGN',
        shopExceptionDetailDTOS: [{ exceptionDesc: '' }]
      }
      await getExceptionType('恢复').then(res => {
        if (res.success === 1 && res.data.records.length > 0) {
          submitForm.exceptionHandleId = res.data.records[0].id
        }
      })
      if (!submitForm.exceptionHandleId) {
        this.$message.warning('未获取到异常配置id')
        return
      }
      this.$prompt('请输入恢复说明', {
        confirmButtonText: '确定',
        closeOnClickModal: false,
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = ''
            submitForm.shopExceptionDetailDTOS[0].exceptionDesc = instance.inputValue || ''
            submitForm.exceptionDesc = instance.inputValue || ''
            saveException(submitForm).then(res => {
              if (res.success === 1) {
                // 恢复成功后，重新获取数据判断恢复按钮是否可操作
                // this.getInfo()
                this.$message.success('恢复申请提交成功')
                instance.confirmButtonLoading = false
                done()
                this.$emit('success', true)
              }
            })
          } else {
            done()
          }
        }
      })
    },

    // 暂停按钮
    pause() {
      this.pauseVisible = true
    },
    handleClick(tab, event) {
      if (tab.label === '出图明细') {
        this.$nextTick(() => {
          this.$refs.refPicDetail.initTableData()
        })
      }
      if (tab.label === '设计图纸') {
        this.$nextTick(() => {
          this.$refs.refDesignPic.initTableData()
        })
      }
      if (tab.label === '报图明细') {
        getSeriesDetailById(this.queryId).then(res => {
          if (res.success === 1) {
            this.picDetailList = this.handlerData(res.data || [])
          }
        })
      }
    },
    // 处理数据
    handlerData(data) {
      const t = {}
      for (const item of data) {
        const key = item.areaCode
        if (t[key] === undefined) {
          t[key] = []
        }
        // 设置默认值
        // item.acceptArea ? '' : item.acceptArea = 0
        // item.acceptSeriesArea ? '' : item.acceptSeriesArea = 0
        // item.actualOutpicArea ? '' : item.actualOutpicArea = 0
        // item.assortCustomizedArea ? '' : item.assortCustomizedArea = 0
        // item.seriesOutpicArea ? '' : item.seriesOutpicArea = 0
        // item.acceptId ? '' : item.acceptId = this.detailData.id
        t[key].push(item)
      }
      // 按照区域合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.spaceCode || item.spaceName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照方案合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          const obj = {}
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            const key = e.styleCode || e.styleName
            if (obj[key] === undefined) {
              obj[key] = []
            }
            obj[key].push(e)
          })
          for (const [I, item] of Object.entries(obj)) {
            item.forEach((e, i) => {
              if (i === 0) {
                e.styleSpanRow = item.length
                e.styleSpanColumn = 1
              } else {
                e.styleSpanRow = 0
                e.styleSpanColumn = 0
              }
              e.group = item
              result.push(e)
            })
          }
        }
      }
      return result
    },
    // 处理数据
    handlerPicData(data) {
      const t = {}
      for (const item of data) {
        const key = item.picTaskName
        if (t[key] === undefined) {
          t[key] = []
        }
        t[key].push(item)
      }
      // 按照图纸合并
      const result = []
      for (const [k, v] of Object.entries(t)) {
        const programs = {}
        for (let i = 0; i < v.length; i++) {
          const item = v[i]
          if (i === 0) {
            item.areaSpanRow = v.length
            item.areaSpanColumn = 1
          } else {
            item.areaSpanRow = 0
            item.areaSpanColumn = 0
          }
          const key = item.picTaskName
          if (programs[key] === undefined) {
            programs[key] = []
          }
          programs[key].push(item)
        }
        // 按照方案合并
        // eslint-disable-next-line no-unused-vars
        for (const [k, v] of Object.entries(programs)) {
          const obj = {}
          v.forEach((e, i) => {
            if (i === 0) {
              e.programSpanRow = v.length
              e.programSpanColumn = 1
            } else {
              e.programSpanRow = 0
              e.programSpanColumn = 0
            }
            const key = e.id
            if (obj[key] === undefined) {
              obj[key] = []
            }
            obj[key].push(e)
          })
          for (const [I, item] of Object.entries(obj)) {
            item.forEach((e, i) => {
              if (i === 0) {
                e.styleSpanRow = item.length
                e.styleSpanColumn = 1
              } else {
                e.styleSpanRow = 0
                e.styleSpanColumn = 0
              }
              e.group = item
              result.push(e)
            })
          }
        }
      }
      return result
    },
    handleCloseImg() {
      this.imgDialogVisible = false
    },
    async getDict() {
      const { BIZ_TYPE, DECORATION_FORM, SAMPLE_FUNCTION_SPACE, DECORATION_RANGE, MATERIAL_AREA } = await getDictByPatchType(['BIZ_TYPE', 'DECORATION_FORM', 'SAMPLE_FUNCTION_SPACE', 'DECORATION_RANGE', 'MATERIAL_AREA'])
      this.designRangeOptions = DECORATION_RANGE// 门店设计范围
      this.furnishOptions = MATERIAL_AREA
      this.applySampleSpaceOptions = SAMPLE_FUNCTION_SPACE
      this.decorationTypeOptions = DECORATION_FORM
      this.designBizTypeOptions = BIZ_TYPE
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.queryId).then(res => {
        this.fileData = res.data
      })
    },
    handleDownload(file) {
      const a = document.createElement('a')
      const url = `/pdf-file/` + file.attachmentUrl
      const fileName = file.attachmentName
      a.href = url
      a.download = fileName
      a.click()
    },
    handlePreview(file) {
      const fileExtension = file.attachmentUrl.substring(file.attachmentUrl.lastIndexOf('.') + 1).toLowerCase()
      if (fileExtension === 'pdf') {
        // pdf预览
        const url = `/pdf-file/` + file.attachmentUrl
        const routeData = this.$router.resolve({
          path: '/viewFile',
          query: {
            src: btoa(url)
          }
        })
        window.open(routeData.href, '_blank')
      } else if (file.attachmentUrl.substring(0, 11) === 'http://fbpm') {
        window.open(file.attachmentUrl)
      } else if (fileExtension === 'jpg' || fileExtension === 'jpeg' || fileExtension === 'png') {
      // 图片预览
        this.imgDialogVisible = true
        // const test='http://fbpm.quanyou.com.cn/V2017files/2023/08/07/SLM经销商门店设计内容变更申请流程/2bfed140-6d1f-4e5a-b4d1-522655ed363e~793d57872ef5ac150c47a7924ecc755.jpg'
        // this.previewImg = filterURL(test)
        this.previewImg = filterURL(file.attachmentUrl)
      } else if (fileExtension === 'doc' || fileExtension === 'docx' || fileExtension === 'xlsx' || fileExtension === 'excel') {
        // word,excel预览
        window.open('http://oos.quanyou.com.cn/op/view.aspx?src=' + filterURL(file.attachmentUrl))
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },

    getInfo() {
      if (this.queryId) {
        this.dataLoading = true
        getWoleInfo(this.queryId).then(res => {
          if (res.success === 1) {
            this.detailData = res.data
            this.fileData = res.data.shopAttachmentDTOList
            this.getAreaSync(this.detailData.constCode || '')
            this.otherFilters = [otherFiltersItem('constCode', this.detailData.constCode, '=')]
            this.designPicFilters = [otherFiltersItem('constCode', this.detailData.constCode, '='),
              otherFiltersItem('dr', '0', '='),
              otherFiltersItem('enable', '1', '=')]
            this.detailData.furnishAreaContent = this.detailData.furnishAreaContent.split(',') || []
            this.dataLoading = false

            if (this.detailData.state !== 'D' || this.detailData.isAllStoping === '1') this.stateNotAllow = true// 暂停禁用
            if (this.detailData.state === 'A' || this.detailData.state === 'B' || this.detailData.state === 'F' || this.detailData.isStoping === '0') this.regainNotAllow = true
            if (this.detailData.state === 'A' || this.detailData.state === 'B' || this.detailData[0].isEnd === '1') this.changeNotAllow = true
            if (this.detailData.state === 'A' || this.detailData.isEnd === '1') this.designNotAllow = true
          }
        }).catch(() => {
          this.dataLoading = false
        })
      }
    }
  }
}
</script>

<style lang='scss' scoped>
 /deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
.box{
  // display: flex;
  // justify-content: space-between;
    .btn-group{
    //  float: right;
     top: 10px;
    //  position: absolute;
    }
}
.tips-icon{
  position: absolute;
  color:#E6A23C;
  font-size:16px;
  bottom: 90px;
  left: 72px;
}
</style>
